<template>
  <div class="">
    <PageTitle :select="1" :showDay="false"></PageTitle>
    <div class="cont" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.4)"
      :style="{ height: `${clientHeight / scaleX - 90}px` }">
      <el-scrollbar style="height:94%;display: flex;">
        <el-row :gutter="14" style="width: 100%;">
          <el-col :span="16">
            <div class="rowBox"style="margin-bottom: 16px;">
              <indexTable title="涂层工艺设备" :columns="columns1" :columns2="columns12" :data="tuceng1" :data2="tuceng2" style="margin-bottom: 16px;"></indexTable>
              <indexTable title="压光" :columns="columns2" :columns2="columns2" :data="yaguang1" :data2="yaguang2" style="margin-bottom: 16px;"></indexTable>
              <compositeTable title="复合热融工艺设备" :columns="columns5" :data="rerong"></compositeTable>
              <!-- <indexTable title="涂层工艺设备（2号厂房）" :columns="columns1" :data="tuceng2"></indexTable>
              <indexTable title="压光1厂" :columns="columns2" :data="yaguang1"></indexTable>
              <indexTable title="压光2厂" :columns="columns2" :data="yaguang2"></indexTable> -->
            </div>
          </el-col>
          <el-col :span="8">
              <div class="rowBox">
                <rightTable class="device-gl-pt" title="水洗设备" :columns="columns3" :data="shuixi"></rightTable>
                <rightTable class="device-gl-pt" title="预缩设备" :columns="columns4" :data="yusuo"></rightTable>
                <rightTable class="device-gl-pt" title="烫金工艺设备" :isShowMore="true" :height="205" :columns="columns6" :data="tangjin"></rightTable>
                <rightTable  title="拉膜工艺设备" :isShowMore="true" :height="187" :columns="columns7" :data="lamo"></rightTable>
                <!-- <RowItem title="水洗设备">
                  <indexCarousel :columns="columns3" :data="shuixi"></indexCarousel>
                </RowItem>
                <indexDevice :config="threeConfig"></indexDevice>
                <RowItem title="烫金工艺设备">
                  <indexCarousel :columns="columns6" :data="tangjin"></indexCarousel>
                </RowItem> -->
              </div>
            </el-col>
        </el-row>
        <!-- <div class="rowBox" style="padding: 10px;">
          <RowItem title="预缩设备">
            <indexCarousel :columns="columns4" :data="yusuo"></indexCarousel>
          </RowItem>
          <RowItem title="复合热融工艺设备">
            <indexCarousel :columns="columns5" :data="rerong"></indexCarousel>
          </RowItem>
          <RowItem title="拉膜工艺设备">
            <indexCarousel :columns="columns7" :data="lamo"></indexCarousel>
          </RowItem>
        </div> -->
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBaseDataStore } from "@/store";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import indexTable from "./cpns/index-table2.vue";
import rightTable from "./cpns/index-table3.vue";
import compositeTable from "./cpns/index-table4.vue";
// import indexCarousel from "./cpns/index-carousel.vue";
// import indexDevice from "./cpns/index-device2.vue";
// import threeConfig from "./config/index-device-config";
import { getDeviceParam } from "@/api/deviceapi";
import { INAPSDevice } from "@/types/APSData";
/** 数据 */
interface State {
  /** 数据状态 */
  loading: boolean;
  /** 时间定时器 */
  timer: NodeJS.Timeout | undefined;
}
/** api */
const baseDataStore = useBaseDataStore();
/** 数据 */
const loading = ref<boolean>(false);
const tuceng1 = ref<any[]>([]);
const tuceng2 = ref<any[]>([]);
const yaguang1 = ref<any[]>([]);
const yaguang2 = ref<any[]>([]);
const shuixi = ref<any[]>([]);
const yusuo = ref<any[]>([]);
const tangjin = ref<any[]>([]);
const rerong = ref<any[]>([]);
const lamo = ref<any[]>([]);
// 表头-涂层工艺设备
const columns1 = ref<{ title: string; key: string, hidden?: boolean }[]>([
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '车速', key: 'vd26', hidden: false },
  //{ title: '卷起张力', key: 'vd38', hidden: true },
  { title: '刀架位置', key: 'vd42' },
  { title: '刀左侧间隙', key: 'vd46' },
  { title: '刀右侧间隙', key: 'vd50' },
  { title: '刀架角度', key: 'vd54' },
  { title: '底座间隙', key: 'vd58' },
  { title: '温度1', key: 'vd6', hidden: false },
  { title: '温度2', key: 'vd10' },
  { title: '温度3', key: 'vd14' },
  { title: '温度4', key: 'vd18', hidden: false },
  { title: '温度5', key: 'vd22', hidden: false },
  //{ title: '风速', key: 'vd30', hidden: true },
  //{ title: '张力', key: 'vd34', hidden: true },
  // { title: '卷起张力', key: 'vd38' },
])
// 表头-涂层工艺设备
const columns12 = ref<{ title: string; key: string, hidden?: boolean }[]>([
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '车速', key: 'vd26', hidden: false },
  { title: '卷起张力', key: 'vd38', hidden: false },
  { title: '刀架位置', key: 'vd42' },
  { title: '刀左侧间隙', key: 'vd46' },
  { title: '刀右侧间隙', key: 'vd50' },
  { title: '刀架角度', key: 'vd54' },
  { title: '底座间隙', key: 'vd58' },
  { title: '温度1', key: 'vd6', hidden: false },
  { title: '温度2', key: 'vd10' },
  { title: '温度3', key: 'vd14' },
  { title: '温度4', key: 'vd18', hidden: false },
  { title: '温度5', key: 'vd22', hidden: false },
  //{ title: '风速', key: 'vd30', hidden: true },
  //{ title: '张力', key: 'vd34', hidden: true },
  // { title: '卷起张力', key: 'vd38' },
])
/** 表头-压光 */
const columns2 = ref<{ title: string; key: string, hidden?: boolean, num?: number }[]>([
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  //{ title: '钢棍温度', key: 'vd6', hidden: true },
  { title: '压力', key: 'vd10', num: 10 },
  { title: '车速', key: 'vd14' },
  { title: '收卷张力', key: 'vd18' },
  { title: '放布张力', key: 'vd22' },
  //{ title: '底辊温度', key: 'vd26', hidden: true },
  //{ title: '冷却辊温度', key: 'vd30', hidden: true },
])
/** 表头-水洗 */
const columns3 = ref<{ title: string; key: string , num?: number}[]>([
  // { title: '序号', key: 'num' },
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '车速', key: 'vd6' },
  { title: '风速', key: 'vd10' },
  { title: '压力1', key: 'vd14', num: 10 },
  { title: '压力2', key: 'vd18', num: 10 },//张力
])
/** 表头-预缩 */
const columns4 = ref<{ title: string; key: string }[]>([
  { title: '序号', key: 'num' },
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '风箱温度', key: 'vd6' },
  { title: '左风机风速', key: 'vd10' },
  { title: '右风机风速', key: 'vd14' },
])
/** 表头-热融 */
const columns5 = ref<{ title: string; key: string; type?: "boolean" | "warning", num?: number }[]>([
  { title: '序号', key: 'num' },
  { title: '设备', key: 'name' },
  // { title: '状态', key: 'state' },
  // { title: '温度1', key: 'vd6' },
  // { title: '收卷张力', key: 'vd10' },
  //{ title: '电源启停', key: 'vw0', type: "boolean" },
  { title: '主机启停', key: 'vw2', type: "boolean" },
  { title: '机器异常', key: 'vw4', type: "warning" },
  { title: '模温机机温度C°', key: 'vd6' },
  { title: '胶盘温度C°', key: 'vd10' },
  { title: '收卷压臂压力KG', key: 'vd14', num: 10 },
  { title: '收卷张力GK', key: 'vd18' },
  { title: '上入布张力KG', key: 'vd22' },
  { title: '下入布张力KG', key: 'vd26' },
  { title: '上入布比例%', key: 'vd30' },
  { title: '下入布比例%', key: 'vd34' },
  { title: '贴合间隙MM', key: 'vd38' },
  { title: '上糊间隙MM', key: 'vd42' },
  { title: '主机速度M/MIN', key: 'vd46' },
])
/** 表头-烫金 */
const columns6 = ref<{ title: string; key: string, num?: number }[]>([
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '烫金压力', key: 'vd6', num: 10 },
  { title: '上胶压力', key: 'vd10', num: 10 },
  { title: '车速', key: 'vd14' },
  { title: '收卷张力', key: 'vd18' },
  { title: '进膜张力', key: 'vd22' },
  { title: '温度1', key: 'vd26' },
  { title: '温度2', key: 'vd30' },
])
/** 表头-拉膜 */
const columns7 = ref<{ title: string; key: string }[]>([
  { title: '序号', key: 'num' },
  { title: '设备', key: 'name' },
  { title: '状态', key: 'state' },
  { title: '设备运行', key: 'vw0' },
  { title: '设备停止', key: 'vw2' },
  { title: '设备断电', key: 'vw4' },
  { title: '温度1', key: 'vd6' },
  { title: '温度2', key: 'vd10' },
  { title: '温度3', key: 'vd14' },
  { title: '温度4', key: 'vd18' },
  { title: '张力', key: 'vd30' },
  { title: '车速', key: 'vd34' }
])

const scaleX = computed(() => {
  return baseDataStore.getBaseData("scaleX") as number;
});
const clientHeight = computed(() => {
  return baseDataStore.getBaseData("clientHeight") as number;
});
/** 数据 */
let state = ref<State>({
  loading: false,
  timer: undefined,
});
/** @生命周期 */
onMounted(() => {
  getDevice();
  setTimer();
})
onBeforeUnmount(() => {
  clearTimeout(state.value.timer);
})
/** 方法 */
/** 定时器 */
function setTimer() {
  getDevice();
  clearTimeout(state.value.timer);
  state.value.timer = setTimeout(() => {
    setTimer();
  }, 1000 * 60 * 5);
}
/** 获取所有设备数据 */
const getDevice = () => {
  loading.value = true;
  getDeviceParam().then(({ data: { data } }) => {
    const data2: INAPSDevice[] = JSON.parse(JSON.stringify(data));
    const list = data.map(item => {
      if (item.vw0 === 1) {
        item.state = '运行';
      } else if (item.vw2 === 1) {
        item.state = '停止';
      } else if (item.vw4 === 1) {
        item.state = '断电';
      } else {
        item.state = '--';
      }

      const list = [-999.9, -999]
      if (list.includes(item.vd6)) item.vd6 = 0;
      if (list.includes(item.vd10)) item.vd10 = 0;
      if (list.includes(item.vd14)) item.vd14 = 0;
      if (list.includes(item.vd18)) item.vd18 = 0;
      if (list.includes(item.vd22)) item.vd22 = 0;
      if (list.includes(item.vd26)) item.vd26 = 0;
      if (list.includes(item.vd30)) item.vd30 = 0;
      if (list.includes(item.vd34)) item.vd34 = 0;
      return item
    })
    const list2 = data2.map(item => {
      if (item.vw0 === 1) {
        item.state = '运行';
      } else if (item.vw2 === 1) {
        item.state = '停止';
      } else if (item.vw4 === 1) {
        item.state = '断电';
      } else {
        item.state = '--';
      }
      // 依据doc文件夹中资料：设备检查中设备参数-车速系数表.png，做车速系数个性处理
      if (item.name === "二厂涂层3") {
        item.vd26 *= 0.84;
        item.vd26 = parseFloat(item.vd26.toFixed(4));
      }
      if (item.name === "二厂涂层4") {
        item.vd26 *= 0.73;
        item.vd26 = parseFloat(item.vd26.toFixed(4));
      }
      if (item.name === "二厂涂层5") {
        item.vd26 *= 1.17;
        item.vd26 = parseFloat(item.vd26.toFixed(4));
      }
      if (item.name === "一厂涂层4") {
        item.vd26 *= 0.8;
        item.vd26 = parseFloat(item.vd26.toFixed(4));
      }
      if (item.name === "一厂涂层5") {
        item.vd26 *= 0.8;
        item.vd26 = parseFloat(item.vd26.toFixed(4));
      }
      const list = [-999.9, -999]
      if (list.includes(item.vd6)) item.vd6 = 0;
      if (list.includes(item.vd10)) item.vd10 = 0;
      if (list.includes(item.vd14)) item.vd14 = 0;
      if (list.includes(item.vd18)) item.vd18 = 0;
      if (list.includes(item.vd22)) item.vd22 = 0;
      if (list.includes(item.vd26)) item.vd26 = 0;
      if (list.includes(item.vd30)) item.vd30 = 0;
      if (list.includes(item.vd34)) item.vd34 = 0;
      return item
    })
    // 涂层  
    const tuceng = list2.filter(item => item.name.includes('涂层'));
    tuceng1.value = tuceng.filter(item => !item.name.includes('二厂'));

    // console.log(tuceng1.value, "tuceng1.value ");

    tuceng2.value = tuceng.filter(item => {
      if(item.name.includes('二厂')){
        return item;
      }
    });
    /** 压光 */
    const yaguang = list.filter(item => item.name.includes('压光'));
    yaguang1.value = yaguang.filter(item => !item.name.includes('二厂'));
    yaguang2.value = yaguang.filter(item => {
      if(item.name.includes('二厂')){
        item.vd10 = Number((Number(item?.vd10) / 10).toFixed(3));
        return item
      }
    });
    /** 水洗设备 */
    shuixi.value = list.filter(item => {
      if(item.name.includes('水洗')){
        item.name = item.name?.replace("22","2")?.replace("11","1");
        item.vd14 = Number((Number(item?.vd14) / 10).toFixed(3));
        item.vd18 = Number((Number(item.vd18) / 10).toFixed(3));
        return item
      }
    });
    shuixi.value = shuixi.value.map((item, i) => { return { ...item, num: i + 1 } });
    /** 预缩设备 */
    yusuo.value = list.filter(item => item.name.includes('预缩'));
    yusuo.value = yusuo.value.map((item, i) => { return { ...item, num: i + 1 } });
    //console.log(list,'烫金')
    /** 烫金设备 */
    tangjin.value = list.filter(item => {
          if(item.name.includes('烫金')){ 
            item.name = item.name.replace('4','1');
            item.vd6 = Number((Number(item.vd6) / 10).toFixed(3));
            item.vd10 = Number((Number(item.vd10) / 10).toFixed(3));
            return item
          }
    });
    /** 热融设备 */
    rerong.value = list.filter(item => {
      if(item.name.includes('热熔') || item.name.includes('热融')){
        item.vd14 = Number((Number(item.vd14) / 10).toFixed(3));
        item.vd18 = Number((Number(item.vd18) / 10).toFixed(3));
        item.vd22 = Number((Number(item.vd22) / 10).toFixed(3));
        item.vd26 = Number((Number(item.vd26) / 10).toFixed(3));
        return item;
      }
    });
    /** 拉膜设备 */
    lamo.value = list.filter(item => item.name.includes('拉模'));
    // rerong.value = [
    //   { name: "热熔1号机", num: 1, state: "运行", vd10: 44.7, vd6: 100 },
    //   { name: "热熔2号机", num: 1, state: "停止", vd10: 32, vd6: 100 },
    //   { name: "热熔3号机", num: 1, state: "运行", vd10: 11.7, vd6: 100 },
    //   { name: "热熔4号机", num: 1, state: "运行", vd10: 0, vd6: 100 },
    //   { name: "热熔5号机", num: 1, state: "停止", vd10: 16.7, vd6: 0 },
    //   { name: "热熔6号机", num: 1, state: "运行", vd10: 47.2, vd6: 100 },
    //   { name: "热熔7号机", num: 1, state: "停止", vd10: 33.5, vd6: 0 },
    //   { name: "热熔8号机", num: 1, state: "运行", vd10: 29.3, vd6: 100 }]
    rerong.value = rerong.value.map((item, i) => { 
      if(item.name.indexOf('5') != -1){
        item.name = item.name.replace('5','2');
      }else if(item.name.indexOf('3') != -1){
        item.name = item.name.replace('3','4');
      }else if(item.name.indexOf('2') != -1){
        item.name = item.name.replace('2','3');
      }
      return { ...item, num: i + 1 } 
    });
  }).finally(() => {
    loading.value = false;
  })
  /** 涂层工艺设备（1号厂房） */
  // data.forEach(item => {
  //   // const num1 = item.
  // })
}
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.cont {
  //padding: 0 10px 0px;
  background: url(../../assets/imgs/timeBg.png) round;
  padding: 50px 30px 10px;
  margin: -40px 5px 0px;
}

.rowBox {
  // display: flex;
  // justify-content: space-between
  .device-gl-pt{
    margin-bottom: 16px;
  }
}
:deep(.el-scrollbar__wrap){
  width: 100%;
}
:deep(.el-scrollbar__view){
  display: flex;
}
</style>
